<template>
	<!-- 容器 -->
	<view class="container">
		
		<!-- 头部图片 -->
		<view class="head-section">
			
			<!-- 背景色区域 -->
			<view class="titleNview-background" style="background-color: darksalmon;"/>
			
			<!-- 图片区域 -->
			<view class="titleNview-picture">
				<image src="/static/banner/banner1.jpg"/>
			</view>
		</view>
		
		<!-- 头部功能描述区 -->
		<view class="cate-section">
			<view class="cate-row">
				<view class="cate-item">
					<image src="/static/icon_home_brand.png"/>
					<text>录入项目信息</text>
				</view>
				<view class="cate-item">
					<image src="/static/icon_home_brand.png"/>
					<text>选择适配礼包</text>
				</view>								
			</view>
			<view class="cate-row">
				<view class="cate-item">
					<image src="/static/icon_home_brand.png"/>
					<text>提交项目方案</text>
				</view>
				<view class="cate-item">
					<image src="/static/icon_home_brand.png"/>
					<text>确认最终方案</text>
				</view>								
			</view>			
		</view>
		
		<!-- 制作礼包按钮 -->
		<view class="package-section">
			<button @click="gotoCreate()">开始制作礼包方案</button>
		</view>
		
	</view>
</template>

<script>
	export default {
		methods: {
			sayHello() {
				uni.showToast({
					title: '你好啊'
				})
			},
			gotoCreate() {
				uni.redirectTo({
					url: '/pages/project/create'
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		
	}
	
	// 头部区域
	.head-section {
		position: relative;
		overflow: hidden;
		
		
		// 背景色区域
		.titleNview-background {
			width: 100%;
			height: 426upx;
			transition: .4s;
			margin-bottom: 30px;
		}
	
		// 背景图
		.titleNview-picture {
			position: absolute;
			top: 30upx;
			left: 0;
			width: 100%;
			height: 420upx;
			padding: 20px 30px;
			
			image {
				width: 100%;
			}
		}
	}
	
	.cate-section {
		height: 150upx;
		border: 1px solid red;
		border-radius: 16upx;
		padding: 10px 20px;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		margin: 10px 30px;
		
		.cate-item {
			display: flex;
			flex-direction: row;
			align-items: self-end;
			width: 120px;
			margin-right: 10px;
			font-size: 14px;
		}
		
		/* 原图标颜色太深,不想改图了,所以加了透明度 */
		image {
			width: 44upx;
			height: 44upx;
			margin-right: 14upx;
			border-radius: 50%;
			opacity: .7;
			box-shadow: 4upx 4upx 20upx rgba(250, 67, 106, 0.3);
		}
	}
	
	.package-section {
		margin: 0 auto;
		width: 280upx;

		button {
			font-size: 14px;
			color: white;
			background-color: red;
			border-radius: 16upx 16upx;
		}
	}
</style>